<template>
	<view class="grid-body content-box">
		<view class="info flex">
			<image src="/static/images/online-examination/icon-examination.png" />
			<view class="ml-20 info-right">
				<view class="title my-10">{{ data.questionnaireTitle }}</view>
				<view class="my-10 font-12 color-BBBBBB">发布人：{{data.createByName}}</view>
				<view class="submit" v-if="data.fillingStatus !== 'FILLED'" @click="handleClick(data)">填写问卷</view>
			</view>
		</view>
		<view class="footer">
			<view class="font-12 color-BBBBBB">发布时间：{{ data.sendTime | format }}</view>
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	export default {
		name: 'exam-list-item',

		components: {},

		/**
		 * {
		 *  examName: 考试名称
		 *  examDuration: 考试时长
		 *  startTime：开始时间
		 *  endTime: 结束时间
		 * }
		 */
		props: {
			data: {
				type: Object,
				default: () => {}
			},
		},
		filters: {
			format(val) {
				if (!val) return val
				return dayjs(val).format('YYYY/MM/DD HH:mm')
			}
		},
		methods: {
			handleClick(item) {
				// if (item.examStatus && item.examStatus != 2) {
				// 	return
				// }
				this.$emit('click')
			},
		}
	}
</script>

<style scoped lang="scss" type="text/scss">
	.content-box {
  margin-bottom: 30rpx;
  padding: 30rpx 30rpx 20rpx 30rpx;

  .info {
    position: relative;
    justify-content: space-between;
    align-items: center;
  }
  .info-right {
    flex: 1;
    height: 150rpx;
  }
  image {
    width: 150rpx;
    height: 150rpx;
  }
  .title {
    color: #333333;
    font-size: 32rpx;
    font-weight: bold;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;				//溢出内容隐藏
    text-overflow: ellipsis;		//文本溢出部分用省略号表示
    display: -webkit-box;			//特别显示模式
    -webkit-line-clamp: 2;			//行数
    line-clamp: 2;
    -webkit-box-orient: vertical;	//盒子中内容竖直排列
    word-break:break-all;
  }
  .time {
    font-size: 26rpx;
    color: #999999;
    font-weight: 400;
    margin-top: 10rpx;
  }
  .submit {
    position: absolute;
    right: 0;
    bottom: 0;
    width: auto;
    line-height: 50rpx;
    height: 50rpx;
    font-size: 28rpx;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    background: #c4c088;
    padding: 0 24rpx;

		&.disabled {
			background: #ccc;
		}
  }
  .footer {
    margin-top: 20rpx;
    padding-top: 20rpx;
    border-top: 1px solid #d5d7e3;
  }
}
</style>
